/* 
  目标： 了解Context的优缺点-以及使用场景
  
  缺点：
    1. 增加嵌套结构、导致组件关系异常复杂
  优点：
    1. React自带，不用下包
  第三方包：
    1. 体积小。
    2. React自带

  业务场景：
    1. 一键换肤
    2. 多语言
*/

import React, { Component } from 'react';
const { Provider, Consumer } = React.createContext();
// 目标：让儿子组件Son跨过孙子组件，给重孙子组件SonSonSon，传递数据

const { Provider: Provider2, Consumer: Consumer2 } = React.createContext();
export default class App extends React.Component {
  render() {
    return (
      <Provider value={'hello SonSON'}>
        <div>
          <h1>父组件</h1>
          <Son></Son>
        </div>
      </Provider>
    );
  }
}

class Son extends Component {
  render() {
    return (
      <Provider2 value="Hello 71">
        <div>
          <h2> 儿子</h2>
          <SonSon></SonSon>
        </div>
      </Provider2>
    );
  }
}

class SonSon extends Component {
  render() {
    return (
      <Consumer>
        {(num) => (
          <div>
            <h3>传来的数据 {num}</h3>
            <h2> 孙子</h2>
            <SonSonSon></SonSonSon>
          </div>
        )}
      </Consumer>
    );
  }
}

class SonSonSon extends React.Component {
  render() {
    return (
      <div>
        重孙子组件
        <Consumer2>
          {(msg) => {
            return <h1>{msg}</h1>;
          }}
        </Consumer2>
      </div>
    );
  }
}

// Context的缺点：
// 1. 增加组件的嵌套结构，导致关系复杂

// Context的优点：
// 1. React自带，不用增加额外的体积，开源第三方的包喜欢使用

// 使用场景：
// 1.一键换肤
// 2. 多语言

// 💥 注意：
// 1. 业务上几乎不用Context
// 2. Provider 和 Consumer要成对使用
